<template>
  <div class="home">
    <template>
      <div id="nav">
        <Aside></Aside>
        <!-- 使用了exact，表示精确匹配，即这个链接只会在地址为 / 的时候被激活，故点击它，将跳转到默认路由。 -->
        <div :class="!$store.state.collapsed ? 'content' : 'content2'">
          <Header></Header>
          <div class="contentMain">
            <router-view />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Aside from "../components/aside";
import Header from "../components/header";
export default {
  name: "home",
  components: {
    Aside,
    Header,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.ul {
  width: 300px;
  display: flex;
  margin-left: 100px;
}
.ul li {
  margin: 15px;
  background: #000;
  color: #fff;
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 15px 0;
}
.home {
  width: 100vw;
  height: 100%;
  margin: 0 auto;
}
#nav {
  height: 100%;
  position: relative;
  display: flex;
}
.content {
  width: calc(100% - 208px);
  transition: width 0.4s;
}
.content2 {
  width: calc(100% - 80px);
  transition: width 0.2s;
}
.contentMain {
  height: calc(100% - 48px);
  padding: 24px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
}
@media screen and (max-width: 1024px) {
  .home {
    width: 100vw;
    height: 100%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 480px) {
  * {
    margin: 0;
    padding: 0;
  }
}
</style>